<template>
  <div class="foodetail">
    <div class="top">
      <van-icon name="arrow-left" @click="back"/>
       <p>食悦菜谱</p>
       <van-icon name="manager-o" @click="backhome"/>
    </div>

    <div class="detail" v-if="this.$store.state.Fooddetails.length!=0">
      <div class="detail_content" v-for="item in this.$store.state.Fooddetails" :key="item.id">
        <img :src="item.img" alt="">
        <h4>{{item.title}}</h4>
        <div class="collect_content">
          <van-icon name="hot-o" />
          <span>{{item.look}}</span>
          <van-icon name="bullhorn-o" />
          <span>{{item.collect}}</span>
        </div>
        <hr>
        <div class="user">
          <img :src="item.user_img" alt="">
          <span>{{item.username}}</span>
          <p>{{item.detail}}</p>
        </div>
        <!-- 营养 -->
        <div class="yingyang">
          <p>营养分析</p>
          <ul>
            <li v-for="(data,index) in item.fenxi" :key="index" >
              <span class="circle" :style="`background-color:${data.pie_chart_color}`"></span>
              <span>{{data.amount}}</span>
              <span>{{data.nutrient}}</span>
              
            </li>
             <p>{{item.tip}}</p>
          </ul>
           
        </div>
        <!-- 食材清单 -->
        <div class="food_list">
          <p>食材清单</p>
           <ul>
            <li v-for="(k,index) in item.major" :key='index'>
             <span>{{k.title}}</span>
             <span style="color:#979797">{{k.note}}</span>
            
             
            </li>
          </ul>
        </div>
        <!-- 烹饪步骤 -->
        <div class="cookstep">
          <p>烹饪步骤</p>
          <div>
            <ul>
              <li v-for="(td,index) in item.cookstep" :key="index">
                <img :src="td.image" alt="">
                  <p>步骤{{td.position}}/{{item.cookstep.length}}</p>
                  <p style="font-size:20px ;font-weight:lighter">{{td.content}}</p>
                
              </li>
                <div style="text-align:center">
                  <img src="../assets/pink_loading.gif" alt="" 
                style="width:180px;height:130px;">
                </div>
                <p style="text-align:center; font-weight:lighter;margin-bottom:10px">到底咯~~<van-icon @click="backSearch" name="search" size="26px"/></p>
              
            </ul>
          </div>       
        </div>
      </div>

    </div>
    <div v-else style="text-align:center;margin-top:100px">
     <img src="../assets/pink_loading.gif" alt="" style="width:300px;height:200px">
    </div>
   
  </div>
</template>

<style lang="less" scoped>
.top {
  margin-top: 10px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.detail{
  padding: 0 15px;
  .detail_content{
    img{
      width: 100%;
      height: 200px;
    }
    h4{
      margin-top: 5px;
      text-align: center;
     
    }
    .user{
      font-size: 16px;
      span{
        margin-left: 10px;
      }
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      p{
        text-align: center;
        margin-top: 10px;
      }
    }
    .collect_content{
      margin:10px auto;
      width: 40%;
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      align-items: center;
      font-size: 14px;
   
    }
    .yingyang{
      margin-top: 10px;
      ul{
        p{
          margin-top: 10px;
          text-align: center;
          font-size: 16px;
        }
        li{
          margin-top: 5px;
          display: flex;
          // justify-content: space-evenly;
          .circle{
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
          }
          span{
            margin-left: 10px;
            font-size: 14px;
          }
        }
      }
      p{
        font-size: 20px;
        font-weight: bold;
      }
    }
    .food_list{
       p{
          margin-top: 10px;
      font-weight: bold;
          font-size: 20px;
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          li{

            display: flex;
           span{
            font-size: 16px;
            margin-left: 5px;
           }
          }
        }
    }
    .cookstep{
       p{
          margin-top: 10px;
         font-weight: bold;
          font-size: 20px;
        }
    }
  }
}
</style>

<script>
import {Food_recipeid,Food_nutrient} from '../api/index'
export default {
  data(){
    return{
      data(){
        return {

        }
      },
      
    }
  },
   created(){
        console.log(this.$route.query.id);
        this.Food_recipeidFn(this.$route.query.id)
      },
  methods:{
    backSearch(){
     this.$router.push({path:'./search'})
    },
    back(){
      this.$router.go(-1)
    },
    backhome(){
   this.$router.push({path:'./mycenter'})
    },
    // 详情
 async Food_recipeidFn(value){
    await Food_recipeid(value).then((data)=>{
      // console.log(data);
      let {state,result} =data
      if(state=='success'){
       
        let {recipe}=result
        // 全部资料
        //  console.log(recipe);
        let obj={}
        obj.id=recipe.cook_id
        obj.img=recipe.original_photo_path
        obj.title=recipe.title
        obj.look=recipe.ph
        obj.collect=recipe.pw
        obj.user_img=recipe.user.user_photo
        obj.username=recipe.user.nickname
        obj.detail=recipe.cookstory
        // 营养分析
        obj.fenxi=recipe.nutrition_facts
        obj.tip=recipe.nutrition_facts_hint_text
        // 食材清单
        obj.time=recipe.cook_time
        obj.cookdiffity=recipe.cook_difficulty
        obj.major=recipe.major

        // 烹饪步骤
        obj.cookstep=recipe.cookstep
       let arr=[]
       arr.unshift(obj)
        // console.log(obj);
        this.$store.state.Fooddetails=arr
        console.log(this.$store.state.Fooddetails);
      }


       
    })
  },
  // 营养分析
  async Food_nutrientFn(value){
    await Food_nutrient(value).then((content)=>{
      console.log(content);

    })
  }
  }
 
  

  
}
</script>